<template>
  <div class="dashboard-root" style="background: url('@/assets/welcom-bg.jpg') no-repeat center center fixed; background-size: cover;">
    <!-- 控制区域：时间区间、股价叠加选择、对比按钮 -->
    <div class="row m-0 p-0 align-items-center">
      <div class="col-auto p-0 me-3">
        <div class="time-controls">
          <div class="btn-group" role="group">
            <button
              v-for="(label, interval) in timeIntervals"
              :key="interval"
              type="button"
              class="btn btn-outline-secondary" style="color:#eee; border-color:#888;"
              :class="{ active: currentInterval === interval }"
              @click="setInterval(interval)"
            >
              {{ label }}
            </button>
          </div>
        </div>
      </div>

      <div class="col p-0 d-flex align-items-center position-relative">
        <label class="me-2" style="color:#eee;">股价叠加：</label>
        <div class="selected-tags-container me-2" @click="showDropdown = !showDropdown" style="color:#eee; border: 1px solid #888; padding: 0.375rem 0.75rem; border-radius: 0.25rem; cursor: pointer; background-color: rgba(36, 39, 47, 0.65);">
          <span v-if="selectedCodes.length === 0">请选择指数</span>
          <span v-else>
            {{ selectedCodes.map(code => allIndexOptions.find(o => o.ts_code === code)?.name || code).join('，') }}
          </span>
           <span class="dropdown-toggle-icon">{{ showDropdown ? '▲' : '▼' }}</span>
        </div>
         <button class="btn btn-primary" @click="fetchCompareData">对比</button>
         <!-- Add to Favorites Button for Index -->
         <button class="btn btn-outline-primary btn-sm ms-3" @click="addToFavorites" style="color:#4fc3f7; border-color:#4fc3f7;">
           添加到自选
         </button>

        <!-- 弹出式多选菜单 -->
        <div v-if="showDropdown" class="dropdown-menu-custom bg-dark border-secondary p-2" style="background-color: rgba(36, 39, 47, 0.8); border-color: #555;">
          <div class="dropdown-item-custom" v-for="item in allIndexOptions" :key="item.ts_code" style="color:#eee;">
            <input type="checkbox" :value="item.ts_code" v-model="selectedCodes" :id="'chk-' + item.ts_code">
            <label :for="'chk-' + item.ts_code">{{ item.name }} ({{ item.ts_code }})</label>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="row m-0 p-0 mt-3">
      <div class="col-12 p-0 m-0">
        <div class="card bg-dark border-secondary m-0 p-0" style="background-color: rgba(36, 39, 47, 0.8); border-color: #555;">
          <div class="card-header border-secondary p-0 m-0" style="border-color: #555;">
            <h5 class="card-title mb-0 d-flex justify-content-between align-items-center">
              <span style="color:#eee;">K线蜡烛与成交量</span>
              <button class="btn btn-outline-secondary btn-sm" @click="resetKlineZoom">重置缩放</button>
            </h5>
          </div>
          <div class="card-body p-0 m-0">
            <div ref="chartRef" style="width:100%;height:600px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
import axios from 'axios';
import { useRoute } from 'vue-router';

const route = useRoute();
const currentBoard = ref(route.params.board || 'hushen300');
const currentInterval = ref('1W');
const chartRef = ref(null);
let chartInstance = null;

const allIndexOptions = [
  { name: '沪深300', ts_code: '399300.SZ' },
  { name: '上证指数', ts_code: '000001.SH' },
  { name: '深证成指', ts_code: '399001.SZ' },
  { name: '上证50', ts_code: '000016.SH' },
  { name: '中证1000', ts_code: '000852.SH' },
  { name: '中证500', ts_code: '399905.SZ' },
  { name: '中证A50', ts_code: '000922.SH' }
];
const selectedCodes = ref([]); // 叠加对比指数
const showDropdown = ref(false); // 控制下拉菜单显示隐藏

const klineData = ref([]);
const dates = ref([]);
const volumes = ref([]);
const compareData = ref({});

const timeIntervals = {
  '1W': '周K',
  '1M': '月K',
  '1Y': '年K'
};

const setInterval = (interval) => {
  currentInterval.value = interval;
};

const fetchKlineData = async () => {
  console.log('Fetching K-line data for board:', currentBoard.value, 'interval:', currentInterval.value);
  // 确保在切换板块时，先清空叠加选中的代码和分析结果
   selectedCodes.value = [];
   compareData.value = {};

  const res = await axios.get('/api/v1/index/kline', {
    params: {
      board: currentBoard.value,
      interval: currentInterval.value
    }
  });
  if (res.data.code === 200) {
    console.log('K-line data fetched successfully.');
    klineData.value = res.data.data.kline;
    dates.value = res.data.data.dates;
    volumes.value = res.data.data.volumes;
    renderChart();
  }
};

const fetchCompareData = async () => {
  console.log('Fetching compare data for codes:', selectedCodes.value.join(','), 'board:', currentBoard.value);
  if (!selectedCodes.value.length) {
    compareData.value = {};
    renderChart(); // 只显示主K线
    return;
  }

  try {
      // 获取叠加数据 (不使用自定义日期，只使用主图的interval)
      const compareRes = await axios.get('/api/v1/index/compare', {
        params: {
          codes: selectedCodes.value.join(','),
          interval: currentInterval.value // 叠加数据仍使用主图interval
        }
      });

      if (compareRes.data.code === 200) {
        console.log('Compare data fetched successfully:', compareRes.data.data);
        compareData.value = compareRes.data.data;
      } else {
         console.error('Failed to fetch compare data:', compareRes.data.message);
         compareData.value = {};
      }

      // 无论叠加数据是否成功，都尝试渲染图表
      renderChart();

  } catch (error) {
    console.error('Error fetching data:', error);
     compareData.value = {};
     renderChart();
  }

   showDropdown.value = false; // 对比后隐藏下拉
};

const renderChart = () => {
  console.log('Rendering chart...');
  if (!klineData.value.length || !dates.value.length) {
     // 清空图表
     if (chartInstance) {
         chartInstance.dispose();
         chartInstance = null;
     }
     return;
  }
  if (!chartRef.value) return;
  if (chartInstance) chartInstance.dispose();
  chartInstance = echarts.init(chartRef.value);

  const kline = klineData.value.map(item => [item.open, item.close, item.low, item.high]);
  const vols = klineData.value.map((item, idx) => [
      idx,
      item.vol,
      kline[idx][0] > kline[idx][1] ? -1 : 1
  ]);

  const compareSeries = Object.entries(compareData.value || {}).map(([code, data]) => {
    const name = allIndexOptions.find(i => i.ts_code === code)?.name || code;

    const originalCloses = data.closes;

    let baseClose = null;
    for(const close of originalCloses) {
        if (typeof close === 'number' && isFinite(close)) {
            baseClose = close;
            break;
        }
    }

    const normalizedCloses = originalCloses.map(close => {
        if (typeof close === 'number' && isFinite(close) && baseClose !== null && baseClose !== 0) {
            return ((close / baseClose) - 1) * 100 + 100; // 归一化到以100为基准
        }
        return null; // 无效数据点设为null
    });

    return {
      name,
      type: 'line',
      data: normalizedCloses, // 使用归一化后的数据
      // yAxisIndex 将在下方统一设置
      connectNulls: true,
      showSymbol: false,
      smooth: true
    };
  });

  let barWidth = 6;
  let fontSize = 12;
  // 根据数据量动态调整barWidth和fontSize
   const dataPoints = dates.value.length;
   if (dataPoints < 30) { // 数据点非常少，如年K或数据范围很小
     barWidth = 20;
     fontSize = 16;
   } else if (dataPoints < 100) { // 数据点较少，如月K或部分周K
     barWidth = 10;
     fontSize = 14;
   } else { // 数据点多，如周K、日K
     barWidth = 4;
     fontSize = 12;
   }

  const legendData = ['K线', ...compareSeries.map(s => s.name), '成交量'];
  const legendSelected = { 'K线': true, '成交量': true };
  compareSeries.forEach(s => { legendSelected[s.name] = true; }); // 默认选中叠加线

  const option = {
    backgroundColor: 'transparent',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        },
         // 格式化 tooltip
        formatter: function (params) {
            // 增加安全检查，确保 params 存在且不为空
            if (!params || params.length === 0) {
                return '无数据';
            }

            let result = params[0].axisValue + '<br/>'; // axisValue 是完整的 YYYY-MM-DD 日期

            params.forEach(function (item) {
                 // 增加安全检查，确保 item 及其必要属性存在
                 if (!item || item.seriesName === undefined || item.dataIndex === undefined || item.color === undefined) {
                     console.error('Invalid tooltip item:', item);
                     return; // 跳过当前有问题的item
                 }

                 const seriesName = item.seriesName;
                 const dataIndex = item.dataIndex;
                 const color = item.color;

                if (seriesName === 'K线') {
                    // K线数据格式化 (与之前保持一致)
                    // 增加索引范围检查
                     const klineDataPoint = (klineData.value && dataIndex >= 0 && dataIndex < klineData.value.length) ? klineData.value[dataIndex] : undefined;

                    result += '<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:' + color + ';"></span>' +
                              seriesName + '<br/>' +
                              '&nbsp;&nbsp;open: ' + (klineDataPoint && typeof klineDataPoint.open === 'number' ? klineDataPoint.open.toFixed(2) : 'N/A') + '<br/>' +
                              '&nbsp;&nbsp;close: ' + (klineDataPoint && typeof klineDataPoint.close === 'number' ? klineDataPoint.close.toFixed(2) : 'N/A') + '<br/>' +
                              '&nbsp;&nbsp;lowest: ' + (klineDataPoint && typeof klineDataPoint.low === 'number' ? klineDataPoint.low.toFixed(2) : 'N/A') + '<br/>' +
                              '&nbsp;&nbsp;highest: ' + (klineDataPoint && typeof klineDataPoint.high === 'number' ? klineDataPoint.high.toFixed(2) : 'N/A') + '<br/>';

                } else if (seriesName === '成交量') {
                     // 成交量数据格式化 (与之前保持一致)
                     // 增加索引范围检查
                     const volumeValue = (vols.value && dataIndex >= 0 && dataIndex < vols.value.length && vols.value[dataIndex]) ? vols.value[dataIndex][1] : undefined;
                     let formattedVolume = 'N/A';
                     if(typeof volumeValue === 'number') {
                          if (volumeValue >= 100000000) formattedVolume = (volumeValue / 100000000).toFixed(2) + '亿';
                          else if (volumeValue >= 10000) formattedVolume = (volumeValue / 10000).toFixed(2) + '万';
                          else formattedVolume = volumeValue.toFixed(0);
                     }

                     result += '<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:' + color + ';"></span>' +
                               seriesName + ': ' + formattedVolume + '<br/>';
                } else {
                     // 叠加折线图数据格式化 (显示归一化后的值 和 原始收盘价)
                     // 需要根据 seriesName 找到对应的原始叠加数据
                     const originalCompareDataEntry = Object.entries(compareData.value || {}).find(([compareCode]) => {
                         const name = allIndexOptions.find(opt => opt.ts_code === compareCode)?.name || compareCode;
                         return name === seriesName;
                     });

                     let originalClose = 'N/A';
                     // 增加对 originalCompareDataEntry 和 原始数据数组的检查
                     if (originalCompareDataEntry) {
                         const [, originalData] = originalCompareDataEntry;
                          if (originalData && originalData.closes && dataIndex >= 0 && dataIndex < originalData.closes.length) {
                              originalClose = originalData.closes[dataIndex];
                          }
                     }

                    result += '<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:' + color + ';"></span>' +
                              seriesName + ': ' + (typeof item.value === 'number' ? item.value.toFixed(2) + ' (归一化)' : 'N/A') +
                              (typeof originalClose === 'number' ? ' 原值: ' + originalClose.toFixed(2) : '') + '<br/>';
                }
            });
            return result;
        }
    },
    legend: {
      data: legendData,
      textStyle: { color: '#fff' },
      selected: legendSelected
    },
    grid: [
      { left: '10%', right: '8%', top: 60, height: '58%', bottom: '22%' },
      { left: '10%', right: '8%', top: '82%', height: '12%' }
    ],
    xAxis: [
      {
        type: 'category',
        data: dates.value, // 主图和叠加图共享日期轴
        scale: true,
        boundaryGap: false,
        axisLine: { lineStyle: { color: '#8392A5' } },
        axisLabel: {
            color: '#fff',
            fontSize: fontSize,
            // 根据当前时间区间格式化日期显示
            formatter: function(value) {
                // value 是完整的 YYYY-MM-DD 格式
                if (currentInterval.value === '1Y') {
                    return value.substring(0, 4); // 年K显示年份
                } else if (currentInterval.value === '1M') {
                    return value.substring(0, 7); // 月K显示年月
                } else {
                    return value; // 周K或日K显示完整日期 (YYYY-MM-DD)
                }
            }
        },
        axisTick: { show: false },
        splitLine: { show: false }
      },
      {
        type: 'category',
        gridIndex: 1,
        data: dates.value, // 主图和叠加图共享日期轴
        scale: true,
        boundaryGap: false,
        axisLine: { lineStyle: { color: '#8392A5' } },
        axisLabel: {
            color: '#fff',
            fontSize: fontSize,
            // 根据当前时间区间格式化日期显示
            formatter: function(value) {
                // value 是完整的 YYYY-MM-DD 格式
                if (currentInterval.value === '1Y') {
                    return value.substring(0, 4); // 年K显示年份
                } else if (currentInterval.value === '1M') {
                    return value.substring(0, 7); // 月K显示年月
                } else {
                    return value; // 周K或日K显示完整日期 (YYYY-MM-DD)
                }
            }
        },
        axisTick: { show: true },
        splitLine: { show: false }
      }
    ],
    yAxis: [
      { // 第一个Y轴，用于K线图
        scale: true,
        splitArea: { show: true },
        axisLabel: { color: '#fff' },
        // formatter 可以显示实际价格，例如保留两位小数
         formatter: function (value) {
             return value.toFixed(2);
         }
      },
      { // 第二个Y轴，用于叠加折线图
        scale: true,
        gridIndex: 0, // 与第一个grid共享
        splitLine: { show: false }, // 不显示网格线，避免与主图网格线重叠
        axisLabel: { color: '#fff' },
        // formatter 显示归一化后的百分比
         formatter: function (value) {
             return value.toFixed(2) + '%';
         }
      },
      { // 第三个Y轴，用于成交量 (仍然在第二个grid)
        scale: true,
        gridIndex: 1,
        splitNumber: 2,
        axisLabel: { color: '#fff' }
      }
    ],
    dataZoom: [
      { type: 'inside', xAxisIndex: [0, 1], start: 0, end: 100 }, // 默认显示全部
      { show: true, xAxisIndex: [0, 1], type: 'slider', top: '96%', start: 0, end: 100 } // 默认显示全部
    ],
    series: [
      {
        name: 'K线',
        type: 'candlestick',
        data: kline,
        barWidth: barWidth,
        itemStyle: {
          color: '#ec0000',
          color0: '#00da3c',
          borderColor: '#8A0000',
          borderColor0: '#008F28'
        },
        yAxisIndex: 0 // K线使用第一个Y轴
      },
      // 叠加系列现在使用第二个Y轴
      ...compareSeries.map(s => ({
          ...s,
          yAxisIndex: 1 // 叠加系列使用第二个Y轴
      })),
      {
        name: '成交量',
        type: 'bar',
        xAxisIndex: 1,
        yAxisIndex: 2, // 成交量使用第三个Y轴
        data: vols,
        barWidth: barWidth,
        itemStyle: { color: '#7fbe9e' }
      }
    ]
  };
  chartInstance.setOption(option);
  window.addEventListener('resize', () => chartInstance && chartInstance.resize());
};

const resetKlineZoom = () => {
  // 重置 dataZoom
   if (chartInstance) {
       chartInstance.setOption({
           dataZoom: [
               { start: 0, end: 100 },
               { start: 0, end: 100 }
           ]
       });
   }
};

// Function to add current index to favorites
const addToFavorites = async () => {
  const userId = localStorage.getItem('user_id'); // **重要：请根据您的实际认证实现获取用户ID**
  if (!userId) {
    alert('请先登录以使用自选功能。');
    return;
  }

  // We need the ts_code of the current index being viewed.
  // The route parameter 'board' might be the board name, not the ts_code.
  // We need to find the ts_code from the indexCategories or index_code_board_map based on the current 'board' or route.
  // For now, let's assume the route param 'board' directly corresponds to the ts_code for simplification, or find it from a mapping.

  // **Important:** Need a reliable way to get the current index's ts_code.
  // Based on backend app.py and AppSidebar.vue, the route param is 'board', which maps to ts_code via index_code_board_map.
  // We need to find the ts_code from the current 'board' name.

  let currentTsCode = null;
  // Find the ts_code based on the current board name (route.params.board)
  for (const code in index_code_board_map) {
      if (index_code_board_map[code].board === route.params.board) {
          currentTsCode = code;
          break;
      }
  }

  if (!currentTsCode) {
      alert('无法获取当前指数代码，请稍后再试。');
      return;
  }

  try {
    // Replace with your actual API call to backend favorites add endpoint
    const response = await axios.post('/api/v1/favorites/add', {
      user_id: userId,
      item_type: 'index', // Indicate item type is index
      item_code: currentTsCode, // Use the found ts_code
      // Add board
      board: route.params.board // Use the board name from route params
      // category is null or undefined for index
    });

    if (response.data.code === 200) {
      alert('添加自选成功！');
      // Optionally, update a state variable
    } else if (response.data.code === 409) {
      alert(response.data.message);
    } else {
      alert('添加自选失败: ' + response.data.message);
    }
  } catch (error) {
    console.error('Error adding index to favorites:', error);
    alert('添加自选失败，请检查网络或稍后再试。');
  }
};

// 监听时间区间和板块变化，重新获取K线数据并清空叠加和分析结果
watch([currentInterval, currentBoard], () => {
   fetchKlineData(); // 这个方法里会清空 selectedCodes, compareData
});

// 监听叠加代码变化，重新获取叠加数据，但不立即触发分析，等待用户点击"分析所选区间"
watch(selectedCodes, () => {
   console.log('watch(selectedCodes) triggered. Current selectedCodes:', selectedCodes.value);
   console.log('selectedCodes changed:', selectedCodes.value);
   // selectedCodes 变化时调用 fetchCompareData，并在其回调中处理数据和渲染
   // 不在这里调用 fetchCustomAnalysis，因为用户可能还在选择日期
   fetchCompareData();
}, { deep: true });

// 监听路由变化，自动切换板块
watch(
  () => route.params.board,
  (newBoard) => {
    currentBoard.value = newBoard || 'hushen300';
    fetchKlineData(); // 获取新板块K线数据并清空叠加结果
  },
  { immediate: true } // 立即执行一次，用于初始加载
);

// 组件挂载时初始化
onMounted(() => {
   console.log('IndexDashboard mounted.');
   // 初始加载由 watch(route.params.board, ...) 的 immediate 触发
});

// 点击外部关闭下拉菜单
onMounted(() => {
  document.addEventListener('click', (e) => {
    const dropdownContainer = document.querySelector('.col.p-0.d-flex.align-items-center.position-relative');
    if (dropdownContainer && !dropdownContainer.contains(e.target)) {
      console.log('Clicked outside dropdown, closing.');
      showDropdown.value = false;
    }
  });
});

// Need to define indexCategories or import the mapping
// For now, hardcode the mapping based on backend app.py
const index_code_board_map = {
    '399300.SZ': {'board': 'hushen300', 'description': '沪深300指数'},
    '000001.SH': {'board': 'shanghai_stock_exchange_index', 'description': '上证指数'},
    '399001.SZ': {'board': 'shenzhen_component_index', 'description': '深证成指'},
    '000016.SH': {'board': 'sse50', 'description': '上证50指数'},
    '000852.SH': {'board': 'zhongzheng1000', 'description': '中证1000指数'},
    '399905.SZ': {'board': 'zhongzheng500', 'description': '中证500指数'},
    '000922.SH': {'board': 'zhongzhenga50', 'description': '中证A50指数'}
};

</script>

<style scoped>
.dashboard-root {
  width: 100%;
  height: 100%;
  /* background: #181A20; Reverted to dark background */
  padding: 0;
  margin: 0;
  color: #ecf0f1; /* Reverted to light text */
}
.row, .col-12, .card, .card-header, .card-body, .d-flex, .fund-type-selector, .time-controls {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.bg-dark {
  background-color: #1a1a1a !important; /* Reverted to dark background */
}
.card, .card-header, .card-body {
  border: none !important; /* Reverted to no border */
  background: transparent !important; /* Reverted to transparent */
  box-shadow: none !important; /* Reverted shadow */
}
.card {
  background-color: #242424; /* Reverted to dark background */
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Reverted hover shadow */
}
.card-body {
  height: 350px;
}
.form-select {
  background-color: #242424; /* Reverted to dark background */
  color: #e0e0e0; /* Reverted to light text */
  border-color: #444; /* Reverted to dark border */
}
.btn-outline-secondary {
  color: #e0e0e0; /* Reverted to light text */
  border-color: #444; /* Reverted to dark border */
}
.btn-outline-secondary:hover,
.btn-outline-secondary.active {
  background-color: #444; /* Reverted to dark background */
  color: #fff; /* Reverted to white text */
}
.card-title {
  color: #fff !important; /* Reverted to white text */
  font-weight: bold;
  text-shadow: 0 1px 4px #000; /* Reverted text shadow */
}
.text-muted {
  color: #b0b0b0 !important; /* Reverted to gray text */
}
.text-primary {
  color: #4fc3f7 !important; /* Reverted to teal */
}
.text-success {
  color: #7CFC00 !important; /* Reverted to green */
}
.text-white {
  color: #fff !important; /* Reverted to white */
}
.fund-info-item span {
  font-weight: bold;
  letter-spacing: 1px;
}

/* 自定义多选下拉菜单样式 */
.selected-tags-container {
    border: 1px solid #444; /* Reverted to dark border */
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
    min-height: 38px; /* 保持与按钮对齐 */
    cursor: pointer;
    background-color: #242424; /* Reverted to dark background */
    color: #e0e0e0; /* Reverted to light text */
    flex-grow: 1; /* 占据剩余空间 */
    display: flex;
    align-items: center;
     position: relative; /* 为了容纳绝对定位的图标 */
}

.selected-tags-container .dropdown-toggle-icon {
    margin-left: auto; /* 推到右边 */
     font-size: 0.8rem;
     color: #b0b0b0; /* Reverted icon color */
}


.dropdown-menu-custom {
  position: absolute;
  top: 100%; /* 位于输入框下方 */
  left: 0;
  z-index: 1000;
  min-width: 100%; /* 与触发器同宽 */
  max-height: 200px; /* 限制高度，出现滚动条 */
  overflow-y: auto;
  border: 1px solid #444; /* Reverted to dark border */
  border-radius: 0.25rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175); /* Reverted shadow */
   background-color: #2c3e50; /* Reverted to dark background */
}

.dropdown-item-custom {
  padding: 0.25rem 1rem;
  cursor: pointer;
  color: #ecf0f1; /* Reverted to light text */
   display: flex; /* 使复选框和label对齐 */
   align-items: center;
}

.dropdown-item-custom label {
    cursor: pointer;
    margin-bottom: 0; /* 移除label默认margin */
    margin-left: 0.5rem; /* 复选框与label间隔 */
     flex-grow: 1; /* label占据剩余空间 */
}

.dropdown-item-custom:hover {
  background-color: #34495e; /* Reverted hover background color */
}

/* form-control-sm 样式调整，使其在深色背景下可见 */
.form-control-sm {
    height: calc(1.8125rem + 2px); /* 保持与按钮高度一致 */
}
</style>